<template>
  <div>
   <el-card>
         <div class="add_box">
      <el-button type="warning" icon="el-icon-plus" @click="handleAdd" v-permission="'productCategory:add'"
        >添加</el-button
      >
    </div>
    <div class="table_box">
      <el-table
        :data="tableData"
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="name" label="分类名称"> </el-table-column>
        <el-table-column prop="sort" label="排序"> </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
        <el-table-column prop="modifiedTime" label="修改时间">
        </el-table-column>
        <el-table-column prop="remark" label="备注"> </el-table-column>
        <el-table-column prop="lev" label="层级">
          <template scope="scope">
            <el-tag v-if="scope.row.lev === 1">一级</el-tag>
            <el-tag type="success" v-if="scope.row.lev === 2">二级</el-tag>
            <el-tag type="warning" v-if="scope.row.lev === 3">三级</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="操作">
          <template scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="handleEdit(scope.row)"
              v-permission="'productCategory:edit'"
            ></el-button>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              v-permission="'productCategory:delete'"
              @click="handledel(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :title="isEdit ? '编辑物资类别' : '添加物资类别'"
      :visible.sync="dialogVisible"
      @close="closeFn"
    >
      <el-form
        v-if="dialogVisible"
        ref="addForm"
        label-width="100px"
        :rules="addRules"
        :model="addForm"
      >
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="addForm.name" clearable></el-input>
        </el-form-item>
        <el-form-item label="父分类" v-if="!isEdit">
          <el-cascader
            v-model="result"
            :options="options"
            :props="props"
            @change="handleChange"
            :change-on-select="true"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="addForm.remark" clearable></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model="addForm.sort"
            :min="1"
            :max="10"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeFn">取 消</el-button>
        <el-button type="primary" @click="handleSumbit">确 定</el-button>
      </span>
    </el-dialog>
   </el-card>
  </div>
</template>

<script>
import {
  list,
  add,
  getParent,
  update,
  deleteFn
} from '../../../api/categories'
export default {
  data () {
    return {
      tableData: [],
      page: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      addForm: {
        name: '',
        remark: '',
        pid: '0',
        sort: ''
      },
      props: {
        expandTrigger: 'hover',
        value: 'id',
        label: 'name',
        children: 'children'
      },
      isEdit: false,
      dialogVisible: false,
      addRules: {
        name: [
          { required: true, message: '请输入分类名', trigger: 'blur' },
          {
            min: 2,
            max: 10,
            message: '长度在 2 到 10 个字符',
            trigger: 'blur'
          }
        ],
        remark: [
          { required: true, message: '请输入备注信息', trigger: 'blur' }
        ],
        sort: [{ required: true, message: '请输入排序号', trigger: 'blur' }]
      },
      options: [],
      result: [],
      editId: null
    }
  },
  methods: {
    handledel (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await deleteFn(id)
          if (!res.success) return this.$notify.error(res.data.errorMsg)
          this.getTreeData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleEdit (row) {
      this.editId = row.id
      this.isEdit = true
      this.dialogVisible = true
      // 深克隆一份
      const obj = JSON.parse(JSON.stringify(row))
      this.addForm = obj
    },
    handleSumbit () {
      this.$refs.addForm.validate((valid) => {
        if (!valid) return
        !this.isEdit ? this.onAdd() : this.onEdit()
      })
    },
    async onEdit () {
      const res = await update(this.addForm, this.editId)
      if (!res.success) return this.$notify.error(res.data.errorMsg)
      this.$notify.success('编辑成功')
      this.getTreeData()
      this.dialogVisible = false
    },
    async onAdd () {
      const res = await add(this.addForm)
      if (!res.success) return this.$notify.error(res.data.errorMsg)
      this.$notify.success('添加成功')
      this.getTreeData()
      this.dialogVisible = false
    },
    async getTreeData () {
      const res = await list(this.page)
      if (!res.success) return this.$notify.error(res.data.errorMsg)
      this.tableData = res.data.rows
      this.total = res.data.total
    },
    closeFn () {
      this.dialogVisible = false
      this.addForm = {
        name: '',
        remark: '',
        pid: '0',
        sort: ''
      }
      this.result = []
    },
    handleAdd () {
      this.dialogVisible = true
      this.isEdit = false
    },
    handleChange (val) {
      if (val.length === 0) {
        this.addForm.pid = '0'
      }
      this.addForm.pid = val[val.length - 1]
    },
    async getParementOptions () {
      const res = await getParent()
      if (!res.success) return this.$notify.error(res.data.errorMsg)
      this.options = res.data
    }
  },
  created () {
    this.getTreeData()
    this.getParementOptions()
  }
}
</script>

<style >
</style>
